<template>
	<el-card shadow="hover" header="数据统计_charts0" v-loading="loading">
		<scEcharts ref="c1" height="696.5px" :option="option"></scEcharts>
	</el-card>
</template>

<script>
import scEcharts from '@/components/scEcharts';

export default {
	title: "数据统计_charts0",
	icon: "el-icon-user",
	description: "数据统计",
	components: {
		scEcharts
	},
	data() {
		return {
			loading: true,
			option: {},
		}
	},
	created() {
		this.initData()
	},
	mounted() {

	},

	methods: {

		/**
		 * 初始化数据
		 */
		async initData() {
			this.loading = true

			var datas = [
				////////////////////////////////////////
				[
					{ name: '圣彼得堡来客', value: 5.6 },
					{ name: '陀思妥耶夫斯基全集', value: 1 },
					{ name: '史记精注全译（全6册）', value: 0.8 },
					{ name: '加德纳艺术通史', value: 0.5 },
					{ name: '表象与本质', value: 0.5 },
					{ name: '其它', value: 3.8 }
				],
				// ////////////////////////////////////////
				[
					{ name: '银河帝国5：迈向基地', value: 3.8 },
					{ name: '俞军产品方法论', value: 2.3 },
					{ name: '艺术的逃难', value: 2.2 },
					{ name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
					{ name: 'Scrum 精髓', value: 1.2 },
					{ name: '其它', value: 5.7 }
				],
				////////////////////////////////////////
				[
					{ name: '克莱因壶', value: 3.5 },
					{ name: '投资最重要的事', value: 2.8 },
					{ name: '简读中国史', value: 1.7 },
					{ name: '你当像鸟飞往你的山', value: 1.4 },
					{ name: '表象与本质', value: 0.5 },
					{ name: '其它', value: 3.8 }
				]
			];

			var option = {
				title: {
					text: '阅读书籍分布',
					left: 'center',
					textStyle: {
						color: '#999',
						fontWeight: 'normal',
						fontSize: 14
					}
				},
				series: datas.map(function (data, idx) {
					var top = idx * 33.3;
					return {
						type: 'pie',
						radius: [20, 60],
						top: top + '%',
						height: '33.33%',
						left: 'center',
						width: 400,
						itemStyle: {
							borderColor: '#fff',
							borderWidth: 1
						},
						label: {
							alignTo: 'edge',
							formatter: '{name|{b}}\n{time|{c} 小时}',
							minMargin: 5,
							edgeDistance: 10,
							lineHeight: 15,
							rich: {
								time: {
									fontSize: 10,
									color: '#999'
								}
							}
						},
						labelLine: {
							length: 15,
							length2: 0,
							maxSurfaceAngle: 80
						},
						labelLayout: function (params) {
							const isLeft = params.labelRect.x < 738 / 2;
							const points = params.labelLinePoints;
							// Update the end point.
							points[2][0] = isLeft
								? params.labelRect.x
								: params.labelRect.x + params.labelRect.width;
							return {
								labelLinePoints: points
							};
						},
						data: data
					};
				})
			}

			this.option = option;
			this.loading = false
		}
	}
}
</script>
